{layout name="./base/base_back"}
 <link rel="stylesheet" type="text/css" href="/front/css/common.css"/>
	<link rel="stylesheet" type="text/css" href="/front/css/changepwd.css"/>
	<script src="/front/js/jquery.js"></script>
		<!--修改登录密码开始-->
		<div id="change-pwd-box">
			<div id="change-pwd">
				{include file="./navleft"}
				<div class="change-pwd-right">
					<div class="change-pwd-tit">绑定卡</div>
					<form action="/userinfo/bindcardform" method="post">
						<div class="change-pwd-form">
							<div class="form-group-input">
								<label for="" class="form-label">卡号：</label>
								<input type="text" name='number' value="" placeholder="请输入您的卡号"/>
								<span id="card_error" style="color: red;"></span>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">手机号码：</label>
								<input type="text" name="mobile" value="" placeholder="请输入卡号对应的手机号码"/>
								<input type="button"  id="phone_codea" value="点我获取手机验证码" class="get-mob-code" />
								<span id="phone_error1" style="color: red;">
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">验证码：</label>
								<input type="text" name="phone_code"  placeholder="请输入短信校验码"/>
								<span id="code_error" style="color: red;"></span>
							</div>
							<div class="form-group-input form-button">
								<button type="submit">下一步</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--修改登录密码结束-->
		<script src="/front/js/js.js"></script>
		<script type="text/javascript">
			//发送手机验证码
			$(document).ready(function(){
				var mobile = $('input[name="mobile"]').val();
			    $("#phone_codea").click(function(){
			    	if($.trim(mobile)) {
						alert('请输入卡号对应的手机号码');
	    			}else{
	    				$.get('/userinfo/SendCode?phone='+$("input[name='mobile']").val(),function(data) {
						});
	    			}
			     })
			});
		</script>
		<script type="text/javascript">
	    	$(function(){
	    		//手机格式
	    		$("input[name='mobile']").blur(function(){
	    			var mobile = $('input[name="mobile"]').val();
	    			//不能为空
	    			if(!$.trim(mobile)) {
						$("input[name='mobile']").css({border: "1px solid red"});
						$("#phone_error1").html("请输入手机号码");
						return false;
	    			}
	    			//手机号格式是否满足
	    			if((/^1[3|4|5|7|8]\d{9}$/.test(mobile)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(mobile))){
						$("input[name='mobile']").css({border: "1px solid green"});
						$("#phone_error1").html("");
	    			}else {
						$("input[name='mobile']").css({border: "1px solid red"});
						$("#phone_error1").html("格式不正确");
						return false;
	    			}
	    		})
	    		//卡号
	    		$("input[name='number']").blur(function(){
	    			var number = $('input[name="number"]').val();
	    			//不能为空
	    			if(!$.trim(number)) {
						$("input[name='number']").css({border: "1px solid red"});
						$("#card_error").html("请输入卡号");
						return false;
	    			}else{
	    				$("input[name='number']").css({border: "1px solid green"});
	    				$("#card_error").html("");
	    			}
	    		})
	    		//手机验证码
	    		$("input[name='phone_code']").blur(function(){
	    			var phone_code = $('input[name="phone_code"]').val();
	    			//不能为空
	    			if(!$.trim(phone_code)) {
						$("input[name='phone_code']").css({border: "1px solid red"});
						$("#code_error").html("请输入短信校验码");
						return false;
	    			}else{
	    				$("input[name='phone_code']").css({border: "1px solid green"});
	    				$("#code_error").html("");
	    			}
	    		})
	    	})
		</script>

